<template>
  <div class="all-apps" ref="allApps">
    <div class="top">
      <div class="left" ref="partitionList">
        <img src="~@/assets/dashboard/comp_icon_3.png" alt="" width="24" height="24" />
        <span class="title_span">应用列表</span>
        <div class="partition-list">
          <div
            class="partition"
            v-for="(item,index) in showPartitionList"
            :key="index"
            @click="showThisApps(item,false)"
          >
            <span>{{ item.text }}</span>
            <img src="~@/assets/dashboard/down-arrow.png" alt="" width="11" height="7" />
            <div class="children-menu" v-if="item.active">
              <div
                class="options-item"
                v-for="(appItem,appIndex) in item.apps"
                @click.stop="clickAppOption(appItem)"
              >
                {{ appItem.text }}
              </div>
            </div>
          </div>
          <div
            class="partition more-partition"
            v-if="partitionListShowIndex<$store.state.dashboard.partitionList.length-1"
            @click="showMorePartitionList"
          >
            <span>更多</span>
            <img src="~@/assets/dashboard/down-arrow.png" alt="" width="11" height="7" />
            <div class="children-menu" v-if="showMore">
              <div
                class="options-item"
                v-for="(item,index) in partitionList.slice(partitionListShowIndex)"
                @click.stop="showThisApps(item,true)"
              >
                <span>{{ item.text }}</span>
                <img src="~@/assets/dashboard/right-arrow.png" alt="" width="7" height="12" />
                <div class="children-menu-2" v-if="item.active">
                  <div
                    class="options-item-2"
                    v-for="(appItem,appIndex) in item.apps"
                    @click.stop="clickAppOption(appItem)"
                  >
                    {{ appItem.text }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right" @click="openManage">
        <img src="~@/assets/dashboard/manage.png" alt="" width="14" height="14" />
        <span>管理分区</span>
      </div>
    </div>
    <div class="content">
      <template v-for="(item,index) in $store.state.dashboard.partitionList">
        <div class="app-item" :class="{
          'app-item-big': item.apps.length > 4,
          'app-item-small': item.apps.length <= 4,
        }">
          <div class="top-row">
            <div class="left">
              <img :src="item.img" alt="" width="16" height="16" />
              <span>{{ item.text }}</span>
            </div>
            <div class="right" @click.stop="openAppOrderManage(item)">
              <img src="~@/assets/dashboard/appIcons/btns/order.png" alt="" width="14" height="14" />
              <span>排序</span>
            </div>
          </div>
          <div class="app-content">
            <div
              class="one-app"
              v-for="(appItem,appIndex) in item.apps"
              :key="appItem.text"
              @mouseenter="appItem.active=true"
              @mouseleave="appItem.active=false"

            >
              <div class="app-left" @click="openNewTab(appItem)">
                <img :src="appItem.img" alt="" width="40" height="40" />
                <span>{{ appItem.text }}</span>
              </div>
              <div class="plus-btn" :class="{active:appItem.active}"
                   v-if="!appItem.frequentlyUsed"
                   @click.stop="addFrequentlyUsedApp(appItem)">
                <el-tooltip class="item" effect="dark" content="添加常用应用" placement="top">
                  <img src="~@/assets/dashboard/appIcons/btns/plus.png" alt="" />
                </el-tooltip>
              </div>
              <div class="mult-btn" :class="{active:appItem.active}"
                   v-if="appItem.frequentlyUsed && appItem.text!=='广播通知' && appItem.text!=='我的待办'"
                   @click.stop="removeFrequentlyUsedApp(appItem)">
                <el-tooltip class="item" effect="dark" content="移除常用应用" placement="top">
                  <img src="~@/assets/dashboard/appIcons/btns/mult.png" alt="" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <!--    管理分区-->
    <app-partition-manage
      :dialog-visible="manageDialog.show"
      :options="manageDialog.options"
      @close="closeManage"
      @save="saveManage"
    ></app-partition-manage>
    <!--    分区应用排序-->
    <app-order-manage
      :dialog-visible="appOrderManageDialog.show"
      :options="appOrderManageDialog.options"
      @close="closeAppOrderManage"
      @save="saveAppOrderManage"
    ></app-order-manage>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { allAppList } from "@/components/workApp/components/appList";
import appPartitionManage from "./dialogs/appPartitionManage.vue";
import appOrderManage from "./dialogs/appOrderManage.vue";
import searchTypeManage from "./dialogs/searchTypeManage.vue";
import bangongzhichi from '@/assets/dashboard/appIcons/type/bangongzhichi.png'
import gerenxiangguan from '@/assets/dashboard/appIcons/type/gerenxiangguan.png'
import tongzhidaiban from '@/assets/dashboard/appIcons/type/tongzhidaiban.png'
import wenjiangongju from '@/assets/dashboard/appIcons/type/wenjiangongju.png'
import yuanchengxietong from '@/assets/dashboard/appIcons/type/yuanchengxietong.png'
import zichanguanli from '@/assets/dashboard/appIcons/type/zichanguanli.png'
import { findAllAppNew_axios, editUserAppNew_axios } from "@/api/wordbench";
import store from "@/store";
import {f} from "vuedraggable/dist/vuedraggable.common";
export default {
  components: {
    searchTypeManage,
    appPartitionManage,
    appOrderManage,
  },
  name: "",
  props: {
  },
  data() {
    return {
      // partitionList: [
      //   {
      //     text: '办公支持',
      //     active: false,
      //     img: bangongzhichi,
      //     apps: [],
      //   },
      //   {
      //     text: '资产管理',
      //     active: false,
      //     img: zichanguanli,
      //     apps: [],
      //   },
      //   {
      //     text: '文件工具',
      //     active: false,
      //     img: wenjiangongju,
      //     apps: [],
      //   },
      //   {
      //     text: '远程协同',
      //     active: false,
      //     img: yuanchengxietong,
      //     apps: [],
      //   },
      //   {
      //     text: '个人相关',
      //     active: false,
      //     img: gerenxiangguan,
      //     apps: [],
      //   },
      //   {
      //     text: '通知待办',
      //     active: false,
      //     img: tongzhidaiban,
      //     apps: [],
      //   },
      // ],
      partitionListShowIndex: 4,
      erd: null,
      manageDialog: {
        show: false,
        options: [],
      },
      appOrderManageDialog: {
        show: false,
        options: [],
      },
      showMore: false,
    }
  },
  computed: {
    ...mapState(["myInfo", "icReadDriveOpen"]),
    showPartitionList() {
      return this.partitionListShowIndex>=this.$store.state.dashboard.partitionList.length-1?this.$store.state.dashboard.partitionList:this.$store.state.dashboard.partitionList.slice(0,this.partitionListShowIndex)
    },
  },
  mounted() {
    this.$store.dispatch('getAllApps', this.myInfo.id);
    this.getPartitionListWidth()
  },
  beforeDestroy () {
    if(this.erd){
      this.erd.uninstall(this.$refs['partitionList'])
    }
  },
  methods: {
    //获取完整应用对象（旧版测试用）
    getAllAppsObj(){
      allAppList.forEach((item,index)=>{
        let partitionIndex = this.partitionList.findIndex((pitem,pindex)=>{
          return pitem.text === item.type
        })
        if(partitionIndex!==-1){
          this.partitionList[partitionIndex].apps.push({
            ...item,
            frequentlyUsed: false,
            active: false
          })
        }
      })
    },
    //显示分类下的应用下拉菜单
    showThisApps(item,showMore = false){
      this.showMore = showMore
      if(!item.active){
        this.$store.state.dashboard.partitionList.forEach((pitem)=>{
          pitem.active = (pitem.text === item.text) && pitem.apps.length>0
        })
      }
      else{
        let idx = this.$store.state.dashboard.partitionList.findIndex((pitem)=>{
          return pitem.text === item.text
        })
        this.$store.state.dashboard.partitionList[idx].active = false
      }
    },
    clickAppOption(appItem){
      window.$addTab(appItem.text)
    },
    //更多下拉菜单
    showMorePartitionList() {
      this.showMore = !this.showMore
      if(!this.showMore){
        this.$store.state.dashboard.partitionList.forEach((pitem)=>{
          pitem.active = false
        })
      }
    },
    //监听宽度
    getPartitionListWidth() {
      let elementResizeDetectorMaker = require("element-resize-detector")
      this.erd = elementResizeDetectorMaker()
      this.$nextTick(()=>{
        this.erd.listenTo(
          this.$refs['partitionList'], (element)=>{
            console.log(element.clientWidth,'apps宽度')
            if(element.clientWidth > 723){
              this.partitionListShowIndex = this.$store.state.dashboard.partitionList.length - 1
            }
            else {
              this.partitionListShowIndex = 4
            }
          }
        )
      })
    },
    //管理分区弹窗
    openManage() {
      this.manageDialog = {
        show: true,
        options: this.$utilJs.deepClone(this.$store.state.dashboard.partitionList)
      }
    },
    closeManage() {
      this.manageDialog.show = false
    },
    //管理应用（应用分组排序保存）
    saveManage(list) {
      //this.partitionList = list  //旧版直接前端排序
      let requestData = list.map((item,index)=>{
        return {
          pid: '666666',
          appId: item.id,
          sortNum: index,
          userId: this.$store.state.myInfo.id
        }
      })
      console.log('排序后',requestData)
      editUserAppNew_axios(requestData).then((res)=>{
        if(res.code===200){
          this.$showMsg('编辑成功')
          this.$store.dispatch('getAllApps', this.myInfo.id);
        }
      })
      this.manageDialog.show = false
    },
    //应用排序弹窗
    openAppOrderManage(item) {
      console.log(item)
      this.appOrderManageDialog = {
        show: true,
        options: this.$utilJs.deepClone(item.apps||[])
      }
    },
    closeAppOrderManage() {
      this.appOrderManageDialog.show = false
    },
    //应用分组内应用排序保存
    saveAppOrderManage(list) {
      if(list.length>0){
        //旧版前端直接变化
        // this.partitionList.forEach((item,index)=>{
        //   if(item.text === list[0].type){
        //     item.apps = list
        //   }
        // })
        let requestData = list.map((item,index)=>{
          return {
            pid: item.pid,
            appId: item.id,
            sortNum: index,
            userId: this.$store.state.myInfo.id
          }
        })
        console.log('排序后',requestData)
        editUserAppNew_axios(requestData).then((res)=>{
          if(res.code===200){
            this.$showMsg('编辑成功')
            this.$store.dispatch('getAllApps', this.myInfo.id);
          }
        })
      }
      this.appOrderManageDialog.show = false
    },
    //添加到常用应用
    addFrequentlyUsedApp(item) {
      console.log(item)
      let arr = this.$store.state.dashboard.frequentlyUsedAppList.concat([item])
      let requestData = arr.map((item,index)=>{
        return {
          pid: '888888',
          appId: item.id,
          sortNum: index,
          userId: this.myInfo.id
        }
      })
      console.log('添加常用应用',requestData)
      editUserAppNew_axios(requestData).then((res)=>{
        if(res.code===200){
          this.$showMsg('添加常用应用成功！', 'success')
          this.$store.dispatch('getAllApps', this.myInfo.id);
        }
      })
    },
    //从常用应用删除
    removeFrequentlyUsedApp(item) {
      console.log(item)
      let arr = this.$store.state.dashboard.frequentlyUsedAppList.filter((fItem)=>{
        return fItem.text !== item.text
      })
      let requestData = arr.map((item,index)=>{
        return {
          pid: '888888',
          appId: item.id,
          sortNum: index,
          userId: this.myInfo.id
        }
      })
      console.log('移除常用应用',requestData)
      editUserAppNew_axios(requestData).then((res)=>{
        if(res.code===200){
          this.$showMsg('移除常用应用成功！', 'success')
          this.$store.dispatch('getAllApps', this.myInfo.id);
        }
      })
    },
    //新标签页打开应用
    openNewTab(item) {
      window.$addTab(item.text)
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.all-apps {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  min-height: 368px;
  //padding: 0 4px;
  //background-color: #f2f3f6;
  backdrop-filter: blur(10px);
  .top {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      width: calc(100% - 80px);
      display: flex;
      align-items: center;
      .title_span {
        margin-left: 9px;
        font-size: 16px;
        color: #1f1e1d;
      }
      .partition-list {
        margin-left: 40px;
        width: calc(100% - 140px);
        display: flex;
        align-items: center;
        .partition {
          padding: 0 8px;
          margin-right: 8px;
          display: flex;
          align-items: center;
          font-size: 14px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.55);
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          img {
            margin-left: 6px;
          }
          &:hover {
            background-color: rgba(0,0,0,0.06);
          }
          .children-menu {
            position: absolute;
            left: 0;
            top: 30px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 4px;
            border-radius: 8px;
            box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
            width: max-content;
            display: flex;
            flex-direction: column;
            .options-item {
              padding: 0 12px;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              color: @textColor;
              border-radius: 4px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;
              span {
                margin-right: 16px;
              }
              &:hover {
                background-color: rgba(0,0,0,0.06);
              }
              &.active {
                background-color: #fff0e5 !important;
              }

              .children-menu-2 {
                position: absolute;
                left: calc(100% + 8px);
                top: 0;
                background-color: #fff;
                box-sizing: border-box;
                padding: 4px;
                border-radius: 8px;
                box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
                width: max-content;
                display: flex;
                flex-direction: column;
                .options-item-2 {
                  padding: 0 12px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 14px;
                  color: @textColor;
                  border-radius: 4px;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  &:hover {
                    background-color: rgba(0,0,0,0.06);
                  }
                  &.active {
                    background-color: #fff0e5 !important;
                  }
                }
              }

            }
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        margin-left: 5px;
        font-size: 12px;
        color: #565551;
      }
    }
  }
  .content {
    width: 100%;
    height: 532px;
    box-sizing: border-box;
    padding: 4px;
    margin-bottom: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
    grid-gap: 4px;
    .app-item-small {
      background-color: #fff;
      border-radius: 6px;
      height: 262px;
      box-sizing: border-box;
      padding: 14px 12px;
    }
    .app-item-big {
      background-color: #fff;
      border-radius: 6px;
      height: 262px;
      box-sizing: border-box;
      padding: 14px 12px;
      grid-column-start: span 2;
    }
    .app-item {
      .top-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 22px;
        .left {
          display: flex;
          align-items: center;
          span {
            margin-left: 8px;
            font-size: 14px;
            color: @textColor;
          }
        }
        .right {
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 0 8px;
          border-radius: 6px;
          span {
            margin-left: 4px;
            font-size: 12px;
            color: #535353;
          }
          &:hover {
            background-color: rgba(0,0,0,0.06);
          }
        }
      }
      .app-content {
        width: 100%;
        display: grid;
        margin-top: 8px;
        height: calc(100% - 26px);
        //grid-template-columns: repeat(auto-fill,minmax(0,1fr));
        grid-template-columns: minmax(160px,1fr) minmax(160px,180px);
        grid-template-rows: repeat(4,1fr);
        grid-auto-flow: column dense;
        grid-column-gap: 20px;
        .one-app {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .app-left {
            display: flex;
            align-items: center;
            span {
              color: rgba(0,0,0,0.66);
              font-size: 14px;
              margin-left: 12px;
              white-space: nowrap;
            }
          }
          .plus-btn, .mult-btn {
            width: 16px;
            height: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            visibility: hidden;
            &.active {
              visibility: visible;
            }
            img {
              width: 12px;
              height: 12px;
            }
            &:hover {
              background-color: #f2f3f6;
            }
          }
          &:hover {
            .plus-btn, .mult-btn {
              visibility: visible;
            }
          }
        }
      }
    }
  }
}
</style>
